<template>
  <div class="detail-box">
    <div
      class="book-bg"
      :style="'background-image:url(' + bookDetail.image + ')'"
    ></div>

    <div class="book-box">
      <!-- NavBar -->
      <div class="nav-bar">
        <van-icon name="arrow-left" color="#061B41" size="20" @click="handleToBack" />
        <span>SANYE</span>
      </div>

      <div class="book-detail">
        <van-image :src="bookDetail.image" class="book-cover" fit="cover" radius="8">
          <template v-slot:loading>
            <van-loading type="spinner" size="20" />
          </template>
        </van-image>
        <div class="book-info">
          <div class="writer van-ellipsis">{{ bookDetail.writer }} 著</div>
          <div class="name van-ellipsis">{{ bookDetail.name }}</div>
          <div class="type van-ellipsis">
            {{ bookDetail.is_over }}、{{ bookDetail.type }}
          </div>
        </div>
      </div>
      <div
        v-if="!last_read_chapter"
        class="submit-button"
        @click="handleToRead(bookDetail.id, bookDetail.first_chapter_id)"
      >
        开始阅读
      </div>
      <div
        v-else
        class="submit-button"
        @click="handleToRead(bookDetail.id, last_read_chapter)"
      >
        继续阅读
      </div>
    </div>

    <!--Intro-->
    <div class="intro-container">
      <div class="intro-title">简介</div>
      <div class="intro-main">{{ bookDetail.intro }}</div>
    </div>

    <!-- Chapter-list -->
    <div class="chapter-container">
      <div class="chapter-count">
        <div>
          <span>目录</span><span> / 共{{ chapterCount }}章</span>
        </div>
        <van-icon name="arrow-down" @click="handleToSort" v-if="chapterSort" />
        <van-icon name="arrow-up" @click="handleToSort" v-else />
      </div>
      <div
        v-if="bookDetail.new_chapter"
        class="chapter-new van-ellipsis"
        @click="handleToRead(bookDetail.id, bookDetail.last_chapter_id)"
      >
        <span>最新 </span><span>{{ bookDetail.new_chapter }}</span>
      </div>

      <van-list
        :loading="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="loadChapter"
        :error="error"
        error-text="请求失败，点击重新加载"
        class="chapter-list"
      >
        <span
          v-for="(item, index) in chapterList"
          :key="index"
          class="chapter-item van-ellipsis"
          @click="handleToRead(item.book_id, item.id)"
          >{{ item.title }}</span
        >
      </van-list>
    </div>
  </div>
  <BackToTop />
</template>
<script lang="ts" setup>
import { ref, Ref, computed, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { getChapterDetail, getChapterList } from '@/api/chapter'
import BackToTop from '@/components/BackToTop/BackToTop.vue'

interface BookDetail {
  image: string
  writer: string
  name: string
  id: string
  is_over: number
  type: number
  title: string
  book_id: string
  new_chapter: string | null
  intro: string
  first_chapter_id: string
  last_chapter_id: string
}

interface chapter {
  book_id: string
  id: string
  title: string
}

const bookDetail: Ref<BookDetail> = ref({
  image: '',
  writer: '',
  name: '',
  id: '',
  is_over: 0,
  type: 0,
  title: '',
  book_id: '',
  new_chapter: '',
  intro: '',
  first_chapter_id: '',
  last_chapter_id: ''
})

const loading = ref(false)
const finished = ref(false)
const error = ref(false)
const chapterCount = ref(0)
const chapterList: Ref<chapter[]> = ref([])
const last_read_chapter = ref('')
const chapterSort = ref(true)

const route = useRoute()

onMounted(() => {
  getChapterDetail({ bookId: route.params.book_id as string }).then((res) => {
    bookDetail.value = res.data
  })
})

let page: number = 1
let lastPage: number = 10
const pageSize: number = 20
let orderBy: number = 1

const loadChapter = async () => {
  try {
    if (!route.params.book_id) return
    loading.value = true
    const { data } = await getChapterList({
      bookId: route.params.book_id as string,
      pageSize,
      page,
      orderBy
    })
    chapterList.value = [...chapterList.value, ...data.list]
    page += 1
    chapterCount.value = data.total
    lastPage = data.totalPage
    loading.value = false
    if (page >= data.totalPage) {
      finished.value = true
    }
  } catch (e) {
    loading.value = false
    error.value = true
  }
}

const handleToSort = () => {
  chapterSort.value = !chapterSort.value
  orderBy = chapterSort.value ? 1 : 2
  chapterList.value = []
  page = 1
  loadChapter()
}

const router = useRouter()

const handleToBack = () => {
  router.back()
}

const handleToRead = (book_id: string, chapter_id: string) => {
  router.push({
    name: 'Read',
    params: {
      book_id,
      chapter_id
    }
  })
}
</script>
<style lang="scss" scoped>
.detail-box {
  position: relative;
  background: #f5f8fc;
  min-height: 100vh;
  .book-bg {
    background-repeat: no-repeat;
    background-size: 100% 350px;
    border-bottom: 1px solid rgba(6, 27, 65, 0.08);
    filter: blur(30px);
    height: 310px;
    width: 100%;
    overflow: hidden;
    &::after {
      content: '';
      background: #f5f8fc;
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 310px;
      opacity: 0.8;
      border-radius: 8px;
    }
  }
  .book-box {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 310px;
    border-bottom: 1px solid rgba(6, 27, 65, 0.08);
    overflow: hidden;
    .nav-bar {
      display: flex;
      justify-content: space-between;
      align-content: center;
      border-bottom: 1px solid rgba(6, 27, 65, 0.08);
      padding: 18px 20px;
      span {
        font-size: 16px;
        font-weight: bold;
      }
    }
    .book-detail {
      position: relative;
      .book-cover {
        position: absolute;
        top: 20px;
        left: 20px;
        width: 90px;
        height: 130px;
        background-repeat: no-repeat;
        box-shadow: 0px 16px 40px 0px rgba(6, 27, 65, 0.08);
      }
      .book-info {
        padding: 20px 20px 20px 130px;
        text-align: right;
        min-height: 180px;
        .collection {
          margin-bottom: 32px;
          height: 26px;
          width: 26px;
        }
        .writer {
          color: rgba(6, 27, 65, 0.85);
          font-size: 14px;
          font-weight: bold;
          margin-bottom: 16px;
        }
        .name {
          color: rgba(6, 27, 65, 0.85);
          font-size: 24px;
          font-weight: 800;
          padding-bottom: 16px;
          border-bottom: 1px solid rgba(6, 27, 65, 0.08);
          margin-bottom: 16px;
        }
        .type {
          color: rgba(6, 27, 65, 0.45);
          font-size: 12px;
        }
      }
    }
    .submit-button {
      font-size: 12px;
      font-weight: bold;
      color: #ffffff;
      height: 40px;
      background: #459bf3;
      box-shadow: 0px 12px 32px 0px rgba(146, 200, 255, 0.44);
      border-radius: 8px;
      margin: 0 20px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
  .intro-container {
    margin: 30px 20px 0 20px;
    .intro-title {
      font-size: 16px;
      font-family: Alibaba PuHuiTi;
      font-weight: bold;
      color: #061b41;
      opacity: 0.85;
      margin-bottom: 16px;
    }
    .intro-main {
      font-size: 12px;
      font-family: Alibaba PuHuiTi;
      font-weight: 400;
      color: #061b41;
      opacity: 0.45;
      line-height: 18px;
      padding-bottom: 26px;
      border-bottom: 1px solid rgba(6, 27, 65, 0.08);
    }
  }
  .chapter-container {
    margin-top: 22px;
    padding: 0 20px;
    .chapter-count {
      display: flex;
      justify-content: space-between;
      align-content: center;
      margin-bottom: 20px;
      span:first-child {
        font-size: 16px;
        font-weight: bold;
        color: #061b41;
        opacity: 0.85;
      }
      span:last-child {
        font-size: 12px;
        font-weight: 400;
        color: #061b41;
        opacity: 0.85;
      }
      .chapter {
        height: 20px;
        width: 20px;
      }
      .chapter-sort {
        animation: rotateSort 0.5s;
      }
      .chapter-reverse {
        animation: rotateReverse 0.5s;
        animation-fill-mode: forwards;
      }
    }
    .chapter-new {
      background: #ffffff;
      box-shadow: 0px 8px 22px 0px rgba(6, 27, 65, 0.03);
      border-radius: 8px;
      padding: 16px 18px;
      margin-bottom: 12px;
      span:first-child {
        font-size: 12px;
        font-weight: bold;
        color: #061b41;
        opacity: 0.55;
      }
      span:last-child {
        font-size: 12px;
        font-weight: 400;
        color: #061b41;
        opacity: 0.55;
      }
    }
    .chapter-list {
      min-height: 100vh;
      padding-bottom: 20px;
      .chapter-item {
        position: relative;
        display: block;
        background: #fff;
        padding: 20px 18px;
        color: rgba(6, 27, 65, 0.55);
        font-size: 12px;
        font-weight: 400;
        &:first-child {
          border-radius: 8px 8px 0 0;
        }
        &::after {
          content: '';
          width: calc(100% - 40px);
          height: 1px;
          position: absolute;
          bottom: 0;
          background: rgba(6, 27, 65, 0.08);
          left: 20px;
        }
      }
      :deep(.van-list__finished-text) {
        border-radius: 0 0 8px 8px;
        background: #fff;
      }
    }
  }
}

@keyframes rotateReverse {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(180deg);
  }
}

@keyframes rotateSort {
  from {
    transform: rotate(180deg);
  }
  to {
    transform: rotate(0deg);
  }
}
</style>
